<template>
	<view class="manage-view">
		<view class="top">
			<uni-icons style="margin-left: 25rpx;" type="left" size="30" color="#9f9f9f" @click="toBackPage">
			</uni-icons>
			<view class="input">编辑待办</view>
		</view>

		<view class="content">

			<view class="content-title">
				基本信息
			</view>

			<view class="todo-info">
				<view class="modal-main">
					<view class="modal-main-item">
						<text class="modal-key">标题</text>
						<input type="text" v-model="todoInput.title" placeholder="请输入:" />
					</view>
					<view class="modal-main-item">
						<text class="modal-key">截止时间</text>
						<picker mode="multiSelector" :value="todoInput.gmtEnd" @change="changeTodoDateTime" @columnchange="changeDateTimeColumn" :range="dateTimeArray">
							<view class="picker-input" style="font-size: 32rpx;color: gray;display: flex;flex-direction: row;">
								当前选择：
								<view v-if="todoInput.gmtEnd">
									{{ dateTimeArray[0][todoInput.gmtEnd[0]] }}-{{ dateTimeArray[1][todoInput.gmtEnd[1]] }}-{{ dateTimeArray[2][todoInput.gmtEnd[2]] }}
									{{ dateTimeArray[3][todoInput.gmtEnd[3]] }}:{{ dateTimeArray[4][todoInput.gmtEnd[4]] }}
								</view>
								<view v-else>未选择截止时间</view>
							</view>
						</picker>
					</view>
				</view>
			</view>


			<view class="content-title" v-if="todoInput.title != null">
				<view class="text">负责人</view>
				<uni-icons v-if="todoInput.monitor.userInfo.id == null" style="margin-left: 25rpx;" type="plus" size="25"
					color="#c2c2c2" @click="toEditMonitor()"></uni-icons>
			</view>

			<view class="monitor" v-if="todoInput.monitor.userInfo.id != null">
				<view class="nickname">{{todoInput.monitor.userInfo.nickname}}</view>
				<view class="coin">{{todoInput.monitor.hulaCoin}}</view>
				<view class="button">
					<uni-icons style="margin-left: 25rpx;" type="compose" size="20" color="#9f9f9f"
						@click="toEditMonitor()"></uni-icons>
				</view>
			</view>

			<view class="content-title" v-if="todoInput.title != null">
				<view class="text">共创者</view>
				<uni-icons style="margin-left: 25rpx;" type="plus" size="25" color="#c2c2c2"
					@click="toAddParticipant()"></uni-icons>
			</view>

			<view class="participants" v-if="todoInput.participants.length > 0 ">
				<view class="participant" v-for="(participant,participantIndex) in todoInput.participants">
					<view class="nickname">{{participant.userInfo.nickname}}</view>
					<view class="task">{{participant.title}}</view>
					<view class="coin">{{participant.hulaCoin}}</view>
					<view class="button">
						<uni-icons style="margin-left: 25rpx;" type="compose" size="20" color="#9f9f9f"
							@click="toEditParticipant(participant,participantIndex)"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit-button" @click="saveOrUpdateTeamTodo()">
			{{todoInput.id == null ? '新增待办' : '保存修改' }}
		</view>

		<uni-popup ref="todoMonitorEdit" type="bottom">
			<view class="modal-box">
				<view class="modal-title">负责人待办</view>
				<view class="modal-main">
					<view class="modal-main-item">
						<text class="modal-key">标题</text>
						<input type="text" disabled v-model="todoInput.title" placeholder="请输入:" />
					</view>
					<view class="modal-main-item">
						<text class="modal-key">负责人</text>
						<picker mode="selector" :range="participants" @change="changeMonitor" range-key="nickname">
							<view class="picker-input">当前选择:
								{{ todoInput.monitor.userInfo.nickname ? todoInput.monitor.userInfo.nickname : '无负责人' }}
							</view>
						</picker>
					</view>
					<view class="modal-main-item">
						<text class="modal-key">hula币</text>
						<input type="number" v-model="todoInput.monitor.hulaCoin" placeholder="请输入:" />
					</view>
					<view class="modal-main-item">
						<text class="modal-key">截止时间</text>
						<picker mode="multiSelector" disabled :value="todoInput.monitor.gmtEnd" @change="changeMonitorTodoDateTime"
							@columnchange="changeDateTimeColumn" :range="dateTimeArray">
							<view class="picker-input" style="font-size: 32rpx;color: gray;display: flex;flex-direction: row;">
								当前选择：
								<view v-if="todoInput.monitor.gmtEnd">
									{{ dateTimeArray[0][todoInput.monitor.gmtEnd[0]] }}-{{ dateTimeArray[1][todoInput.monitor.gmtEnd[1]] }}-{{ dateTimeArray[2][todoInput.monitor.gmtEnd[2]] }}
									{{ dateTimeArray[3][todoInput.monitor.gmtEnd[3]] }}:{{ dateTimeArray[4][todoInput.monitor.gmtEnd[4]] }}
								</view>
								<view v-else>未选择截止时间</view>
							</view>
						</picker>
					</view>
				</view>

				<view class="modal-operations">
					<view class="modal-cancel" @tap="monitorEditModalCancel()">取消</view>
					<view class="modal-confirm" @tap="monitorEditModalConfirm()">确定</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="todoParticipantEdit" type="bottom">
			<view class="modal-box">
				<view class="modal-title">共创者待办</view>
				<view class="modal-main">
					<view class="modal-main-item">
						<text class="modal-key">标题</text>
						<input type="text" v-model="todoParticipantInput.title" placeholder="请输入:" />
					</view>
					<view class="modal-main-item">
						<text class="modal-key">负责人</text>
						<picker mode="selector" :range="participants" @change="changeParticipant" range-key="nickname">
							<view class="picker-input">当前选择:
								{{ todoParticipantInput.userInfo.nickname ? todoParticipantInput.userInfo.nickname : '无负责人' }}
							</view>
						</picker>
					</view>
					<view class="modal-main-item">
						<text class="modal-key">hula币</text>
						<input type="number" v-model="todoParticipantInput.hulaCoin" placeholder="请输入:" />
					</view>
					<view class="modal-main-item">
						<text class="modal-key">截止时间</text>
						<picker mode="multiSelector" :value="dateTime" @change="changeParticipantTodoDateTime"
							@columnchange="changeDateTimeColumn" :range="dateTimeArray">
							<view class="picker-input" style="font-size: 32rpx;color: gray;display: flex;flex-direction: row;">
								当前选择：
								<view v-if="todoParticipantInput.gmtEnd">
									{{ dateTimeArray[0][todoParticipantInput.gmtEnd[0]] }}-{{ dateTimeArray[1][todoParticipantInput.gmtEnd[1]] }}-{{ dateTimeArray[2][todoParticipantInput.gmtEnd[2]] }}
									{{ dateTimeArray[3][todoParticipantInput.gmtEnd[3]] }}:{{ dateTimeArray[4][todoParticipantInput.gmtEnd[4]] }}
								</view>
								<view v-else>未选择截止时间</view>
							</view>
						</picker>
					</view>
				</view>

				<view class="modal-operations">
					<view class="modal-cancel" @tap="modalCancel()">取消</view>
					<view class="modal-confirm" @tap="modalConfirm()">确定</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	let movedistance = 0;
	const dateTimePicker = require('../../../../plugin/time-picker/datetime-picker.js');

	export default {
		data() {
			return {
				teamInfo: {},
				participants: [],


				todoInput: {
					id:null,
					title: null,
					gmtEnd: null,
					teamId: null,
					userId: "",
					monitor: {
						id:"",
						title: "",
						hulaCoin: 0,
						gmtEnd: null,
						userInfo: {
							id: null,
							nickname: null
						}
					},
					participants: []
				},

				today: null,
				dateTimeArray: null,
				dateTime: null,
				startYear: 2023,
				endYear: 2030,


				todoParticipantInput: {
					id:"",
					title: "",
					hulaCoin: 0,
					gmtEnd: null,
					userInfo: {
						id: "",
						nickname: ""
					}
				},
				// 如果是-1则为新增，如果是其他值则为修改，对应修改的index
				todoParticipantInputIndex: -1,
			}
		},
		onLoad(options) {
			this.initDatePicker()
			if (options.teamId) {
				this.teamInfo.id = options.teamId
				this.getTeamManageInfo()
			}

			if (options.teamTodoId) {
				this.todoInput.id = options.teamTodoId
				this.getTeamTodoManageInfo()
			}else{
				this.todoInput.teamId = options.teamId
				this.todoInput.gmtEnd = dateTimePicker.dateStringToDateTime(this.today, this.startYear)
			}
		},
		methods: {
			// 获取团队详情
			getTeamManageInfo() {
				this.$api.getTeamManageInfo({
					id: this.teamInfo.id
				}).then(res => {
					this.teamInfo = res.data
					this.participants.push({
						id: res.data.monitor.userInfo.id,
						nickname: res.data.monitor.userInfo.nickname
					})

					let i;
					for (i = 0; i < res.data.participants.length; i++) {
						this.participants.push({
							id: res.data.participants[i].userInfo.id,
							nickname: res.data.participants[i].userInfo.nickname
						})
					}

					console.log(this.participants)
				})
			},

			// 获取团队待办详情
			getTeamTodoManageInfo() {
				this.$api.getTeamTodoManageInfo({
					id: this.todoInput.id
				}).then(res => {
					this.todoInput = res.data
					this.dateTime = dateTimePicker.dateStringToDateTime(this.todoInput.gmtEnd, this.startYear);
				})
			},


			// 新增或修改团队待办
			saveOrUpdateTeamTodo(){
				let todoDateTime = dateTimePicker.dateTimeToDateString(this.dateTime, this.startYear);
				this.todoInput.gmtEnd = todoDateTime
				
				if(this.todoInput.id == null){
					// 新增待办
					this.addTeamTodo()
				}else{
					// 修改待办
					this.updateTeamTodo()
				}
				
				console.log("待办详情",this.todoInput)
			},

			// 新增团队待办
			addTeamTodo() {
				this.$api.addTeamTodo(this.todoInput).then(res => {
					uni.showToast({
						title: '新建成功',
						icon: '',
						duration: 500
					});
				})
			},

			// 修改团队待办
			updateTeamTodo() {
				this.$api.updateTeamTodo({
					id: this.todoInput.id,
					title: this.todoInput.title,
					gmtEnd: this.todoInput.gmtEnd
				}).then(res => {
					uni.showToast({
						title: '修改成功',
						icon: '',
						duration: 500
					});
				})
			},
			
			// 删除团队待办
			deleteTeamTodo: function(todoId) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除该团队待办？',
					success(res) {
						if (res.confirm) {
							that.$api.deleteTeamTodo({
								todoId
							}).then(res => {
								uni.showToast({
									title: '删除成功',
									icon: '',
									duration: 500
								});
								that.getTeamTodoList();
								// 滑动样式回归
								that.slideAnimation(0, 500);
							})
						}
					}
				});
			},

			toEditMonitor() {
				this.todoInput.monitor.gmtEnd =  this.todoInput.gmtEnd
				this.$refs.todoMonitorEdit.open('bottom')
			},

			toEditParticipant(participant, participantIndex) {
				this.todoParticipantInput = participant
				this.todoParticipantInputIndex = participantIndex
				
				this.dateTime = dateTimePicker.dateStringToDateTime(participant.gmtEnd, this.startYear);
				this.$refs.todoParticipantEdit.open('bottom')
			},

			toAddParticipant() {
				this.todoParticipantInput.gmtEnd = dateTimePicker.dateStringToDateTime(this.today, this.startYear);
				this.todoParticipantInputIndex = -1
				this.$refs.todoParticipantEdit.open('bottom')
			},



			//点击取消
			modalCancel() {
				this.closeModal();
			},
			//点击确认
			modalConfirm(e) {
				
				if (this.todoInput.id != null) {
					this.todoParticipantInput.gmtEnd = dateTimePicker.dateTimeToDateString(this.todoParticipantInput.gmtEnd, this.startYear);
					if (this.todoParticipantInputIndex == -1) {
						// 发送新增请求
						this.todoParticipantInput.teamTodoId = this.todoInput.id
						this.todoParticipantInput.teamTodoTitle = this.todoInput.title
						this.$api.addParticipantTodo(this.todoParticipantInput).then(res => {
							uni.showToast({
								title: '添加成功',
								icon: '',
								duration: 500
							});
							this.todoParticipantInput.id = res.data
						})
					} else {
						// 发送修改请求
						this.todoParticipantInput.teamTodoId = this.todoInput.id
						this.todoParticipantInput.teamTodoTitle = this.todoInput.title
						this.$api.updateParticipantTodo(this.todoParticipantInput).then(res => {
							uni.showToast({
								title: '修改成功',
								icon: '',
								duration: 500
							});
						})
					}
				}
				// 插入现有数据
				if (this.todoParticipantInputIndex == -1) {
					// 新增
					this.todoInput.participants.push(this.todoParticipantInput)
				} else {
					// 修改
					this.todoInput.participants[this.todoParticipantInputIndex] = this.todoParticipantInput
				}
				this.closeModal();
			},


			monitorEditModalCancel() {
				this.closeModal();
			},

			monitorEditModalConfirm() {
				// 更新负责人信息
				if (this.todoInput.id != null) {
					// 发送修改请求
					this.todoInput.monitor.teamTodoId = this.todoInput.id
					this.todoInput.monitor.teamTodoTitle = this.todoInput.title
					this.$api.updateParticipantTodo(this.todoInput.monitor).then(res => {
						uni.showToast({
							title: '修改成功',
							icon: '',
							duration: 500
						});
					})
				}

				this.closeModal();
			},




			// 模态框关闭：统一清理动作
			closeModal() {
				this.$refs.todoMonitorEdit.close('bottom')
				this.$refs.todoParticipantEdit.close('bottom')
				this.dateTime = dateTimePicker.dateStringToDateTime(this.todoInput.gmtEnd, this.startYear);
				this.clear();
			},
			// 表单清理
			clear() {
				this.todoParticipantInput = {
					title: "",
					hulaCoin: 0,
					gmtEnd: null,
					userInfo: {
						id: "",
						nickname: ""
					}
				}
			},


			// 负责人选择器绑定
			changeMonitor(e) {
				this.todoInput.monitor.userInfo.id = this.participants[e.detail.value].id
				this.todoInput.monitor.userInfo.nickname = this.participants[e.detail.value].nickname
			},
			
			// 共创者选择器绑定
			changeParticipant(e) {
				this.todoParticipantInput.userInfo.id = this.participants[e.detail.value].id
				this.todoParticipantInput.userInfo.nickname = this.participants[e.detail.value].nickname
			},


			// 日期选择器绑定
			bindDateChange(e) {
				this.todoDate = e.detail.value
			},

			changeTodoDateTime(e) {
				this.todoInput.gmtEnd = e.detail.value
				console.log("修改",this.todoInput.gmtEnd)
			},
			
			changeMonitorTodoDateTime(e) {
				this.todoInput.monitor.gmtEnd = e.detail.value
			},
			
			changeParticipantTodoDateTime(e) {
				this.todoParticipantInput.gmtEnd = e.detail.value
			},

			// 变更选中时间数组
			changeDateTimeColumn(e) {
				var arr = this.dateTime;
				var dateArr = this.dateTimeArray;
				arr[e.detail.column] = e.detail.value;
				dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
				this.dateTimeArray = dateArr;
				this.dateTime = arr;
			},

			// 日期选择器初始化
			initDatePicker() {
				// 获取完整的年月日 时分秒，以及默认显示的数组
				let date = new Date();
				let year = date.getFullYear();
				let month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1) ;
				let day = (date.getDate()) < 10 ? '0' + (date.getDate()) : (date.getDate()) ;
				this.today = year + '-' + month + '-' + day; 
				console.log("今日",this.today);
				
				// 精确到分的处理，将数组的秒去掉
				let obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear); 
				obj.dateTimeArray.pop();
				this.dateTimeArray = obj.dateTimeArray
				console.log(this.dateTimeArray);
			},


			toBackPage() {
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	.manage-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 80rpx;

		.top {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			padding: 20rpx 0;

			background-color: white;
			border-bottom: solid thin #efefef;


			.input {
				width: 450rpx;
				padding-left: 30rpx;
			}


		}


		.content {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin-bottom: 220rpx;

			.content-title {
				margin-left: 30rpx;
				width: 690rpx;
				margin-top: 60rpx;
				font-weight: bold;

				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

			}

			.monitor {
				width: 630rpx;
				margin-left: 30rpx;
				margin-top: 30rpx;
				padding: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				font-size: 28rpx;

				background-color: #FFFFFF;
				box-shadow: 0px 0px 4px 2px #f5f7f5;

				.nickname {
					width: 430rpx;
				}

				.coin {
					width: 80rpx;
				}

				.button {
					width: 80rpx;
				}
			}

			.participants {
				display: flex;
				flex-direction: column;

				.participant {
					width: 630rpx;
					margin-left: 30rpx;
					margin-top: 30rpx;
					padding: 30rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					background-color: #FFFFFF;
					box-shadow: 0px 0px 4px 2px #f5f7f5;

					font-size: 28rpx;

					.avatar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.nickname {
						width: 180rpx;
					}

					.task {
						width: 180rpx;
					}

					.coin {
						width: 80rpx;
					}

					.button {
						width: 80rpx;
					}

				}

			}

			.todo-info {
				width: 690rpx;
				margin-left: 30rpx;

				display: flex;
				flex-direction: column;
				justify-content: space-between;


				.modal-title {
					margin-bottom: 20rpx;
					font-size: 36rpx;
					font-weight: 600;
					text-align: center;
				}

				.modal-main {
					width: 100%;
					font-size: 26rpx;
					margin-top: 20rpx;


					.modal-main-item {
						width: 630rpx;
						padding: 30rpx;
						background-color: #FFFFFF;
						box-shadow: 0px 0px 4px 2px #f5f7f5;

						margin-top: 30rpx;

						.modal-key {
							display: block;

							font-size: 32rpx;
							margin-bottom: 10rpx;
						}

					}

					.modal input,
					.modal .picker-input {
						box-sizing: border-box;
						margin: 10rpx 0;
						width: 100%;
						height: 60rpx;
						border-radius: 20rpx;
						padding: 0 20rpx;
						background-color: aliceblue;

						line-height: 60rpx;
					}

				}

				.modal-operations {
					display: flex;
					justify-content: space-around;
					width: 100%;
					margin-top: 20rpx;


					text-align: center;
				}

				.modal-operations>view {
					font-weight: bold;
					padding: 10rpx;
					border-radius: 4rpx;

					width: 40%;
				}
			}

		}
		
		
		.submit-button{
			position: fixed;
			bottom: 30rpx;
			
			
			width: 670rpx;
			height: 100rpx;
			border-radius: 20rpx;
			background-color: #5DACB1;
			box-shadow: 0px 0px 4px 2px #f5f7f5;
			margin-top: 100rpx;
			
			text-align: center;
			line-height: 100rpx;
			color: white;
			font-weight: bold;
			letter-spacing: 5rpx;
		}

		.modal-box {
			width: 600rpx;
			margin-left: 35rpx;
			margin-bottom: 200rpx;


			padding: 40rpx;
			border-radius: 20rpx;
			background: white;

			display: flex;
			flex-direction: column;
			justify-content: space-between;

			text-align: left;


			.modal-title {
				margin-bottom: 20rpx;
				font-size: 36rpx;
				font-weight: 600;
				text-align: center;
			}

			.modal-main {
				width: 100%;
				font-size: 26rpx;
				margin: 20rpx 0 40rpx;


				.modal-main-item {
					width: 100%;
					margin-bottom: 30rpx;

					.modal-key {
						display: block;

						font-size: 32rpx;
						margin-bottom: 10rpx;
					}

					/* 模态框单项：多选标签 */
					.modal-tags {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						min-height: 80rpx;
					}

					.modal-tag {
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						margin: 0 20rpx 10rpx 0;
						background-color: rgb(231, 240, 247);
					}

					.chosen-tag {
						background: darkorange;
					}

				}

				.modal input,
				.modal .picker-input {
					box-sizing: border-box;
					margin: 10rpx 0;
					width: 100%;
					height: 60rpx;
					border-radius: 20rpx;
					padding: 0 20rpx;
					background-color: aliceblue;

					line-height: 60rpx;
				}

			}

			.modal-operations {
				display: flex;
				justify-content: space-around;
				width: 100%;
				margin-top: 20rpx;

				text-align: center;
			}

			.modal-operations>view {
				font-weight: bold;
				padding: 10rpx;
				border-radius: 4rpx;

				width: 40%;
			}

		}

		.page-btns {
			display: flex;
			position: fixed;
			right: 100rpx;
			bottom: 150rpx;
			z-index: 10;


			.button {
				width: 90rpx;
				height: 90rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border: solid #5DACB1;
				background-color: #FFFFFF;
				border-radius: 50rpx;
				color: white;
			}
		}


		image {
			height: 100%;
			width: 100%;
		}
	}
</style>
